<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-03-04 10:28:16
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-17 13:44:38
 * @FilePath: /XMate-h5/src/views/myXmate/components/noticeBoardHead.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    class="flex justify-between w-screen  items-center py-3 px-2 box-border bg-white"
  >
    <!-- 标签切换 -->
    <div class="flex">
      <div
        v-for="(tab, index) in tabs"
        :key="tab.value"
        class="px-4 py-1.5 mr-2 text-sm whitespace-nowrap rounded-full cursor-pointer min-w-[60px] text-center"
        :class="
          activeIndex === index
            ? 'bg-[#E6EEFF] text-yxt-blue'
            : 'bg-[#F4F5F6] text-[#595959]'
        "
        @click="handleTabChange(tab.value, index)"
      >
        {{ tab.text }}
      </div>
    </div>

    <!-- 筛选条件 -->
    <div class="box-border">
      <van-dropdown-menu active-color="#2979ff">
        <van-dropdown-item :title="cp_mydprt?.name" @open="handleRegionOpen" />
        <van-dropdown-item
          v-model="currentDate"
          :options="dateOptions"
          :title="currentDate.text"
          @change="handleDateChange"
        />
      </van-dropdown-menu>
    </div>

  </div>

  <chooseTeamView
    ref="chooseTeamViewRef"
    :selectItems="testArray"
    @onConfirm="onConfirmTeam"
  />
</template>

<script setup>
import { ref, computed, defineProps } from "vue";
import {
  DropdownMenu as VanDropdownMenu,
  DropdownItem as VanDropdownItem
} from "vant";
import chooseTeamView from "@/views/myXmate/components/chooseTeamView.vue";

const chooseTeamViewRef = ref(null);

const emit = defineEmits([
  "tabChange",
  "regionChange",
  "dateChange",
  "update:mydprt",
  "update:activeIndex"
]);

const props = defineProps({
  mydprt: {
    type: Object,
    default: () => {
      return [];
    }
  },
  tabs: {
    type: Array,
    default: () => {
      return [];
    }
  },
  activeIndex: {
    type: Number,
    default: 0
  }
});

const testArray = computed(() => {
  return [props.mydprt];
});

const cp_mydprt = computed({
  set(v) {
    emit("update:mydprt", v);
  },

  get() {
    console.log("getMydprt: ", props.mydprt);
    return props.mydprt;
  }
});

const handleTabChange = (tab, index) => {
  emit("update:activeIndex", index);
};

const onConfirmTeam = items => {
  cp_mydprt.value = items[0];
  emit("regionChange", items[0]);
};

const handleRegionOpen = () => {
  chooseTeamViewRef.value.show();
};

// 日期选择
const currentDate = ref({ text: "本季", value: "quarter" });
const dateOptions = [
  { text: "本周", value: "week" },
  { text: "本月", value: "month" },
  { text: "本季", value: "quarter" },
  { text: "本年", value: "year" }
];

const handleDateChange = value => {
  currentDate.value = dateOptions.find(item => item.value === value);
  emit("dateChange", value);
};
</script>

<style lang="less" scoped>
:deep(.van-dropdown-menu__bar) {
  height: 32px;
  background: transparent;
  box-shadow: none;
  //flex: 1;
  padding-left: 0px;
  padding-right: 8px;
  box-sizing: border-box;
}

:deep(.van-dropdown-menu) {
  flex: 1;
}


:deep(.van-dropdown-menu__item) {
  .van-dropdown-menu__title {
    font-size: 14px;
    color: #333;
    min-width: 60px;
    text-align: center;

    &::after {
      border-color: transparent transparent #666 #666;
    }

    &--active {
      color: #436bff;
    }
  }
}
</style>
